<template>
    <el-row>
        <el-col :span="8">
           <el-row>
             <el-select v-model="analysisArea" style="width:200px;">
                <el-option
                    v-for="item in analysisAreas"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
            </el-select>
           </el-row>
           <el-row>
             <el-table :data="tableData" stripe style="width: 100%;height: 100%" height="200">
                <el-table-column prop="name" label="名称" width="120" />
                <el-table-column prop="p_mw" label="有功" width="120" />
                <el-table-column prop="q_mvar" label="无功" width="120" />
                <el-table-column prop="vm_pu" label="电压标幺" width="120" />
             </el-table>
           </el-row>
        </el-col>
        <el-col :span="14" style="margin-left:50px;margin-top:34px;">
            <el-card style="height:190px;">
              <ol>
                <li v-for="item in warning" :key="item">
                     {{item}}
                </li>
              </ol>
            </el-card>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="8">
         <div class="box" ref="chartDom"></div>
        </el-col>
        <el-col :span="14" style="margin-left:50px;">
            <el-table :data="tableData2" stripe style="width: 100%;height: 100%" height="200">
                <el-table-column prop="name" label="名称" width="120" />
                <el-table-column prop="t1" label="时间段1" width="120" />
                <el-table-column prop="t2" label="时间段2" width="120" />
                <el-table-column prop="t3" label="时间段3" width="120" />
                <el-table-column prop="t4" label="时间段4" width="120" />
             </el-table>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch,onBeforeUnmount } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
import {BASE_URL} from '@/utils/common.js'

const warning = ref([])

const tableData = ref([])
const analysisAreas = ref([])

const analysisArea = ref('')
const stMapList = ref({})
const recovers = ref([])
const tableData2 = ref([])

let chartDom = ref(null)

const taskCart = ()=>{
   var myChart = echarts.init(chartDom.value);
    var option = {
    xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: recovers.value,
        type: 'bar'
        }
    ]
    };
    option && myChart.setOption(option);
}

onMounted(
  async () =>{
    try{
       const response= await axios.get(BASE_URL+'/getFaultTwoObj')
       console.log(response.data)
      for(let i=0;i<response.data.sts.length;i++){
           let st = response.data.sts[i]
           console.log(st)
           analysisAreas.value.push({value:st,label:st})
      }
      analysisArea.value = response.data.sts[0]
      stMapList.value=response.data.stMapList
      tableData.value=stMapList.value[analysisArea.value]
      recovers.value=response.data.recovers
      warning.value=response.data.warning
      tableData2.value=response.data.genList
    }catch(error){
        console.log(error)
    }
    taskCart()
  }
    
)

watch(analysisArea,(newVal,oldVal)=>{
  tableData.value=stMapList.value[newVal]
})

</script>

<style scoped lang="scss">
.introduction{
    color: rgb(245, 245, 245);
}

.box {
   width: 633px;
  height: 250px;
  background-color: rgb(245, 245, 245);

}
</style>